<template>
  <div class="comment-list">
    <!-- 评论输入框 -->
    <div class="comment-form-container">
      <CommentForm
        :target-id="targetId"
        :target-type="targetType"
        :current-user-id="currentUserId"
        @on-comment-success="handleCommentSuccess"
        class="transition-all duration-300 hover:shadow-md"
      />

    </div>

    <!-- 评论统计 -->
    <div class="comment-count mt-6 mb-4">
      <h3 class="text-lg font-semibold text-gray-800 flex items-center">
        <CommentOutlined class="mr-2 text-primary" />
        {{ commentPage.total }} 条评论
      </h3>
    </div>

    <!-- 调试信息：显示当前的targetId值 -->
    <div v-if="!targetId" class="error-message">
      <a-alert
        message="错误：targetId未设置"
        description="无法加载评论，缺少必要的目标ID参数"
        type="error"
        show-icon
      />
    </div>

    <!-- 评论列表 -->
    <div class="comments" v-if="targetId">
      <transition-group name="comment-list" tag="div">
        <CommentItem
          v-for="comment in commentPage.records"
          :key="comment.id"
          :comment="comment"
          :current-user-id="currentUserId"
          @on-reply-success="handleReplySuccess"
          @on-like-success="handleLikeSuccess"
          class="comment-item"
        />
      </transition-group>
    </div>

    <!-- 空状态 -->
    <div v-if="targetId && commentPage.records.length === 0" class="empty-comments">
      <Empty description="暂无评论，快来发表第一条评论吧~" />
    </div>

    <!-- 分页 -->
    <div class="pagination-container mt-6">
      <a-pagination
        v-model:current="currentPage"
        :page-size="pageSize"
        :total="commentPage.total"
        @change="handlePageChange"
        show-size-changer
        :show-quick-jumper="true"
        :show-total="(total) => `共 ${total} 条评论`"
        class="pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';
import { CommentOutlined } from '@ant-design/icons-vue';
import { Empty } from 'ant-design-vue';
import CommentForm from '../components/CommentForm.vue';
import CommentItem from '../components/Commentltem.vue';  // 确保组件名正确
import { getCommentsByTargetUsingGet} from '@/api/commentController.ts';

// 接收的props
const props = defineProps({
  targetId: {
    type: Number,
    required: true,
    validator: (value) => {
      return typeof value === 'number' && value > 0;
    }
  },
  targetType: {
    type: Number,
    required: true
  },
  currentUserId: {
    type: Number,
    required: true
  }
});

// 评论分页数据
const commentPage = ref({
  records: [],
  total: 0,
  size: 10,
  current: 1
});

// 当前页码和每页大小
const currentPage = ref(1);
const pageSize = ref(10);

// 获取评论列表
const fetchComments = async () => {
  try {
    console.log('请求评论参数:', {
      targetId: props.targetId,
      targetType: props.targetType,
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      currentUserId: props.currentUserId
    });

    const response = await getCommentsByTargetUsingGet({
      targetId: props.targetId,
      targetType: props.targetType,
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      currentUserId: props.currentUserId
    });
    commentPage.value = response.data;

  } catch (error) {
    console.error('获取评论失败:', error);
  }
};

// 监听targetId变化，重新加载评论
watch(
  () => props.targetId,
  (newVal) => {
    if (newVal) {
      fetchComments();
    }
  }
);

// 页面加载时获取评论
onMounted(() => {
  fetchComments();
});

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchComments();
};

// 处理评论发布成功
const handleCommentSuccess = (newComment) => {
  // 添加新评论到列表最前面
  commentPage.value.records.unshift(newComment);
  commentPage.value.total++;
  // 显示成功动画反馈
  message.success('评论发布成功');
};

// 处理回复发布成功
const handleReplySuccess = (commentId, newReply) => {
  const comment = commentPage.value.records.find(item => item.id === commentId);
  if (comment) {
    if (!comment.replies) {
      comment.replies = [];
    }
    comment.replies.push(newReply);
  }
};

// 处理点赞成功
const handleLikeSuccess = (commentId, liked) => {
  const comment = commentPage.value.records.find(item => item.id === commentId);
  if (comment) {
    comment.liked = liked;
    comment.likeCount += liked ? 1 : -1;
  }
};
</script>

<style scoped>
.comment-list {
  max-width: 800px;
  padding: 20px;
}

.comment-form-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.comment-count {
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.comment-count::after {
  content: '';
  position: absolute;
  right: 300px;
  bottom: -1px;
  width: 40px;
  height: 2px;
  background-color: #1890ff;
}

.comments {
  margin-top: 24px;
}

.comment-item {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.comment-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}



.empty-comments {
  text-align: center;
  padding: 40px 0;
  background-color: #fafafa;
  border-radius: 8px;
  margin-top: 24px;
}

.pagination-container {
  display: flex;
  justify-content: center;
}

.pagination {
  margin-top: 20px;
}

.error-message {
  margin: 16px 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .comment-list {
    padding: 10px;
  }

  .comment-item {
    padding: 12px;
  }
}
</style>
